<template>
  <div class="search">
    <!-- 搜索框 -->
    <div class="search-box">
      <input
        type="text"
        class="search-bar"
        placeholder="输入城市名称..."
        v-model.trim="datas.keyword"
        @input="searchCityLists"
        @focus="getFocus"
      />
      <var-button v-show="datas.isShow" @click="cancelBtn"> 取消 </var-button>
    </div>
    <!-- 搜索内容 -->
    <div class="show-lists" v-show="datas.isShow">
      <ul>
        <li
          v-for="item in datas.lists"
          :key="item.id"
          @click="toCity(item.name, item.id)"
        >
          <span>{{ item.name }}</span>
          <span v-if="item.name != item.adm2">,{{ item.adm2 }}</span>
          <span v-if="item.name != item.adm1">,{{ item.adm1 }}</span>
        </li>
        <li class="tip" v-show="datas.hasNoData">没有找到匹配数据</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

import { getCitylist } from '@/service/request'

// 防抖函数
import { debounce } from '@/utils/debounce'

const router = useRouter()
const store = useStore()

const datas = reactive({
  isShow: false,
  hasNoData: false,
  keyword: '',
  searchName: '',
  lists: []
})

const getFocus = () => {
  datas.isShow = true
}
const cancelBtn = () => {
  datas.isShow = false
  datas.keyword = ''
}

// input框输入后搜索城市
const searchCity = () => {
  getCitylist(datas.keyword).then((res) => {
    if (res.data.code == 404) {
      console.log('你输入的城市不存在')
      datas.hasNoData = true
      datas.lists = []
    } else {
      // console.log(res.data.location)
      let result = []
      if (datas.keyword.indexOf('市') != -1) {
        datas.searchName = datas.keyword.replace('市', '')
      } else {
        datas.searchName = datas.keyword
      }
      for (let i in res.data.location) {
        if (res.data.location[i].name.indexOf(datas.searchName) > -1) {
          result.push(res.data.location[i])
        }
      }
      if (!result.length) {
        datas.hasNoData = false
        datas.lists = []
        // console.log('没有拿到城市列表')
      } else {
        datas.lists = result
        datas.searchName = ''
        // console.log(datas.lists)
        datas.isShow = true
        datas.hasNoData = false
      }
    }
  })
}
// 添加防抖
const searchCityLists = debounce(searchCity, 500)

// 根据搜索展示城市数据
const toCity = (city, cityid) => {
  store.dispatch('getCityInfo', city)
  store.dispatch('getWeather', cityid)
  router.push('/home')
}
</script>

<style lang="less" scoped>
.search {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.search-box {
  display: flex;
  width: 100%;
  padding: 0 15px 10px 15px;

  .search-bar {
    display: block;
    flex: 1;
    width: 100%;
    height: 40px;
    padding: 10px;

    color: #313131;
    font-size: 20px;
    appearance: none;
    border: none;
    outline: none;
    background: none;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 0px 16px 0px 16px;
    transition: 0.4s;

    &:focus {
      font-size: 18px;
      box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.25);
      background-color: rgba(255, 255, 255, 0.75);
      border-radius: 16px 0px 16px 0px;
    }
  }

  .var-button {
    border: 1px solid #e7eaf0;
    width: 20%;
    margin-left: 10px;
    height: 40px;
    color: #141a19;
    background: #f5f6f7;
  }
}

.show-lists {
  margin: 0 15px;
  flex: 1;

  border: 2px solid #e7eaf0;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.481);
  ul li {
    margin: 0 10px;
    font-size: 18px;
    box-sizing: border-box;
    height: 50px;
    line-height: 50px;
    padding-left: 30px;
    color: #141a19;
    font-weight: lighter;
    border-bottom: 1px solid #e7eaf0b5;
    cursor: pointer;
  }
  .tip {
    padding: 0;
    text-align: center;
  }
}
</style>
